<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	    <meta content="width=device-width, minimum-scale=1,initial-scale=1, maximum-scale=1, user-scalable=1" id="viewport" name="viewport" />
	    <meta content="yes" name="apple-mobile-web-app-capable" />
	    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
	    <meta content="telephone=no" name="format-detection" />
	    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	    <link rel="stylesheet" type="text/css" href="css/icons-extra.css"/>
	    <link rel="stylesheet" type="text/css" href="css/style.css"/>
		<title>校咖汇</title>
	</head>
	<body id="allModel">
		<script src="js/mui.min.js"></script>
		<script src="js/mui.pullToRefresh.js"></script>
		<script src="js/mui.pullToRefresh.material.js"></script>
		<script src="js/template.js"></script>
		<script src="js/class_list.html.js"></script>
		<script id="modelContent" type="text/html">
			<div class="mui-content class-page">
				<div class="top-bar">
					<header class="header-bar">
						<form class="mui-input-row mui-search search-bar">
							<input type="search" class="mui-input-clear" placeholder="搜索用户，技能">
						</form>
						<!--搜索栏-->
					</header><!--头部搜索栏-->
					<div class="class-nav-title">
						<h1>全部分类</h1>
						<span class="mui-icon mui-icon-arrowup"></span>
					</div>
					<nav class="classNav" id="navBar">
						<div class="class-nav-box">
							{{each nav as value i}}
							<div class="class-nav">
								{{each nav[i].navItem as value i}}
									<a>{{value}}</a>
								{{/each}}
							</div>
							{{/each}}
						</div>
						<span class="mui-icon mui-icon-arrowdown"></span>
					</nav><!--导航-->
					<div class="select-bar">
						{{each selectItem as value i}} {{if i==0}}
							<a class="mui-icon mui-icon-arrowthindown">{{value}}</a>
							{{/if}} {{if i==1}}
							<a class="mui-icon-extra mui-icon-extra-filter">{{value}}</a>
							{{/if}}
						{{/each}}
						<div class="sel-box">
							<div class="sel-box-child sel-box-order">
								<span>价格由高到低</span>
								<span>价格由低到高</span>
							</div>
							<div class="sel-box-child sel-box-sel">
								<span>
									<label>价格区间（元）</label>
									<div class="sel-box-input">
										<input type="text" placeholder="最低价" /><i>-</i><input type="text" placeholder="最高价" />
									</div>
								</span>
								<span>
									<label>所在地</label>
									<div class="sel-box-input">
										<input type="text" placeholder="填写城市" />
									</div>
								</span>
								<button class="mui-btn com-btn">完成</button>
							</div>
						</div>
					</div><!--筛选栏-->
				</div><!--头部-->
				<div class="classList-box">
					{{each list as value i}}
					<div class="mui-scroll-wrapper class-list">
						<div class="mui-scroll">
							<ul class="mui-table-view">
								{{each list[i].children as value j}}
						        <li class="mui-table-view-cell">
					                <header>
					                	<img src={{value.route}} />
					                	<div>
					                		<h2>{{value.title}}</h2>
					                		<p>{{value.shcool}}</p>
					                	</div>
					                </header>
					                <figure>
					                	{{each value.listImg as value i}}
					                	<span>
					                		<img src={{value}}/>
					                	</span>
					                	{{/each}}
					                </figure>
					                <div class="class-name">
					                	<h2>{{value.name}}</h2>
					                	<p>
					                		<span class="mui-icon mui-icon-eye"></span>
					                		{{value.num}}
					                	</p>
					                </div>
					                <p class="class-intro">
					                	<span class="marks"></span>
					                	{{value.intro}}
					                </p>
						        </li>
						        {{/each}}
						    </ul>
						</div>
					</div>
				    {{/each}}
				</div><!--列表容器-->
			</div>
			<div class="mask"></div><!--遮罩-->
		</script>
		
		<script id="loadData" type="text/html">
			{{each list as value i}}
				<li class="mui-table-view-cell">
	                <header>
	                	<img src={{value.route}} />
	                	<div>
	                		<h2>{{value.title}}</h2>
	                		<p>{{value.shcool}}</p>
	                	</div>
	                </header>
	                <figure>
	                	{{each value.listImg as value i}}
	                	<span>
	                		<img src={{value}}/>
	                	</span>
	                	{{/each}}
	                </figure>
	                <div class="class-name">
	                	<h2>{{value.name}}</h2>
	                	<p>
	                		<span class="mui-icon mui-icon-eye"></span>
	                		{{value.num}}
	                	</p>
	                </div>
	                <p class="class-intro">
	                	<span class="marks"></span>
	                	{{value.intro}}
	                </p>
		        </li>
		    {{/each}}
		</script>
		
		<script> 
			(function($){
				mui.init();
				//页面数据
				var data = template('modelContent',myData);
				var loadData = template('loadData',new Object());//上拉加载数据
				document.getElementById('allModel').innerHTML = data;
				
				//禁用滚动条
				document.getElementsByTagName('body')[0].addEventListener('touchmove', function (e) {
				  e.preventDefault();
				});
				
				//自定义滚动条
				var deceleration = mui.os.ios ? 0.003 : 0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: true,
					indicators: true, //是否显示滚动条
					deceleration: deceleration
				});
				
				//显示顶部搜索栏
				document.querySelector('.search-bar').style.display = "block";
				//获取屏幕宽度减去下箭头宽度
				var screenWith = window.screen.availWidth-44;
				//设定导航栏宽度为屏幕宽度减去下箭头的宽度
				document.querySelector('.class-nav-box').style.width = screenWith + "px";
				
				//选项卡
				var nav = document.getElementById('navBar');
				var nav_tag = nav.getElementsByTagName('a');
				var list_tag = document.getElementsByClassName('class-list');
				var class_nav = document.querySelector('.classNav');
				var nav_title = document.querySelector('.class-nav-title');
				var nav_box = document.querySelector('.class-nav-box');
				var arrowdown = document.querySelector('.mui-icon-arrowdown');
				var mask = document.querySelector('.mask')
				var len = nav_tag.length;
				var i = 0;
				list_tag[0].className = "mui-scroll-wrapper class-list class-list-active";//第一个列表显示
				nav_tag[0].className = "active";//导航栏第一个项目高亮
				for(var i=0;i<len;i++){
					nav_tag[i].index = i;
					nav_tag[i].addEventListener('tap',function(){
						for(i=0; i<len; i++){
						    nav_tag[i].className = '';
						    nav_tag[i].parentNode.style.display = 'none';
						    list_tag[i].className = 'mui-scroll-wrapper class-list';
						    class_nav.style.cssText += 'height:44px;top:44px;';
							nav_title.style.display = 'none';
							nav_box.style.width = screenWith + "px";
							arrowdown.style.display = "block";
							mask.style.display = 'none';
					    }
					   nav_tag[this.index].className = 'active';
					   nav_tag[this.index].parentNode.style.display = 'block';
					   list_tag[this.index].className = 'mui-scroll-wrapper class-list class-list-active';
					});
				}
				
				//显示隐藏的导航
				document.querySelector('.mui-icon-arrowdown').addEventListener('tap',function(){
					for(i=0; i<len; i++){
					    nav_tag[i].parentNode.style.display = 'block';
						class_nav.style.cssText += 'height:auto;top:88px';
						nav_title.style.display = 'block';
						nav_box.style.width = '100%';
						arrowdown.style.display = "none";
						mask.style.display = 'block';
						sel_sel.style.display = 'none';
						sel_order.style.display = "none";
						sel_order_bar.style.color = "#333";
						sel_sel_bar.style.color = "#333";
				    }
				});
				
				//隐藏导航
				document.querySelector('.mui-icon-arrowup').addEventListener('tap',function(){
					class_nav.style.cssText += 'height:44px;top:44px;';
					nav_title.style.display = 'none';
					nav_box.style.width = screenWith + "px";
					arrowdown.style.display = "block";
					mask.style.display = 'none';
				});
				document.querySelector('.mask').addEventListener('tap',function(){
					class_nav.style.cssText += 'height:44px;top:44px;';
					nav_title.style.display = 'none';
					nav_box.style.width = screenWith + "px";
					arrowdown.style.display = "block";
					mask.style.display = 'none';
					sel_sel.style.display = 'none';
					sel_order.style.display = "none";
					sel_order_bar.style.color = "#333";
					sel_sel_bar.style.color = "#333";
				});
				
				//筛选框
				var sel_order = document.querySelector('.sel-box-order');
				var sel_sel = document.querySelector('.sel-box-sel');
				var sel_order_bar = document.querySelector('.select-bar .mui-icon-arrowthindown');
				var sel_sel_bar = document.querySelector('.select-bar .mui-icon-extra-filter');
				
				//排序显示
				sel_order_bar.addEventListener('tap',function(){
					sel_order_bar.style.color = "#2bbfff";
					sel_sel_bar.style.color = "#333";
					sel_sel.style.display = 'none';
					sel_order.style.display = "block";
					mask.style.display = 'block';
				});
				
				//排序隐藏
				mui('.sel-box-order').on('tap','span',function(){
					sel_order_bar.style.color = "#333";
					sel_sel.style.display = 'none';
					sel_order.style.display = "none";
					mask.style.display = 'none';
					sel_order_bar.innerHTML = this.innerHTML;
				});
				
				//筛选显示
				sel_sel_bar.addEventListener('tap',function(){
					sel_sel_bar.style.color = "#2bbfff";
					sel_order_bar.style.color = "#333";
					sel_sel.style.display = 'block';
					sel_order.style.display = "none";
					mask.style.display = 'block';
				});
				
				//筛选隐藏
				document.querySelector('.com-btn').addEventListener('tap',function(){
					sel_sel_bar.style.color = "#333";
					setTimeout(function(){
						sel_sel.style.display = 'none';
						sel_order.style.display = "none";
						mask.style.display = 'none';
					},320);
				});
				
				//循环初始化所有上拉加载。
				$.ready(function() {
					$.each(document.querySelectorAll('.mui-scroll-wrapper .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							up: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										createFragment(ul, index, 5);
										self.endPullUpToRefresh();
									}, 1000);
								}
							}
						});
					});
					var createFragment = function(ul, index, count, reverse) {
						loadData = template('loadData', upData);
						ul.innerHTML += loadData;
					};
				});
			})(mui);
		</script>
	</body>
</html>
